<div class="sheet-info wrap feature-wrap">
    <div class="g-wrap6">
        <div class="m-info clearfix">
            <div class="cover">
                <img [src]="sheetInfo.coverImgUrl" [alt]="sheetInfo.name">
                <div class="mask"></div>
            </div>
            <div class="cnt">
                <div class="cntc">
                    <div class="hd clearfix">
                        <i class="f-pr"></i>
                        <div class="tit">
                            <h2 class="f-ff2 f-brk">{{sheetInfo.name}}</h2>
                        </div>
                    </div>

                    <div class="user f-cb">
                        <a class="face" [hidden]="!sheetInfo.creator"
                            [href]="'//music.163.com/artist?id=' +
                            sheetInfo.userId">
                            <img [src]="sheetInfo.creator?.avatarUrl"
                                [alt]="sheetInfo.creator?.nickname">
                        </a>
                        <span class="name">
                            <a [href]="'//music.163.com/artist?id=' +
                                sheetInfo.userId" class="s-fc7">{{sheetInfo.creator?.nickname}}</a>
                        </span>
                        <span class="time s-fc4">{{sheetInfo.createTime | date:
                            'yyyy-MM-dd'}} 创建</span>
                    </div>

                    <div class="btns">
                        <nz-button-group class="btn">
                            <button class="play" nz-button nzType="primary"
                                (click)="onAddSongs(sheetInfo.tracks, true)">
                                <i nz-icon nzType="play-circle"
                                    nzTheme="outline"></i>播放
                            </button>
                            <button class="add" nz-button nzType="primary"
                                (click)="onAddSongs(sheetInfo.tracks)">+</button>
                        </nz-button-group>
                        <button class="btn like" nz-button
                            [disabled]="sheetInfo.subscribed"
                            (click)="onLikeSheet(sheetInfo.id.toString())">
                            <span>收藏</span>({{sheetInfo.subscribedCount}})
                        </button>
                        <button class="btn share" nz-button
                            (click)="shareResource(sheetInfo, 'playlist')">
                            <span>分享</span>({{sheetInfo.shareCount}})
                        </button>
                    </div>

                    <div class="tags clearfix">
                        <span>标签</span>
                        <div class="tag-wrap">
                            <nz-tag *ngFor="let item of sheetInfo.tags">{{item}}</nz-tag>
                        </div>
                    </div>

                    <div class="intr f-brk"
                        [class.f-hide]="controlDesc.isExpand">
                        <p [innerHTML]="description.short"></p>
                    </div>

                    <div class="intr f-brk"
                        [class.f-hide]="!controlDesc.isExpand">
                        <p [innerHTML]="description.long"></p>
                    </div>

                    <div class="expand" (click)="toggleDesc()"
                        *ngIf="description.long">
                        <span>{{controlDesc.label}}</span>
                        <i nz-icon [nzType]="controlDesc.iconCls"
                            nzTheme="outline"></i>
                    </div>
                </div>
            </div>
        </div>

        <div class="wy-sec">
            <div class="u-title wy-sec-wrap clearfix">
                <h3 class="wy-sec-tit">
                    <span class="f-ff2">歌曲列表</span>
                </h3>
                <span class="sub s-fc3">
                    {{sheetInfo.tracks.length}} 首歌
                </span>
                <div class="more s-fc3">
                    播放：
                    <strong class="s-fc6">{{sheetInfo.playCount}}</strong>
                    次
                </div>
            </div>

            <nz-table
                class="wy-table"
                #basicTable
                [nzData]="sheetInfo.tracks"
                [nzFrontPagination]="false"
                nzBordered
                nzNoResult="暂无音乐！">
                <thead>
                    <tr>
                        <th nzWidth="80px"></th>
                        <th>标题</th>
                        <th nzWidth="120px">时长</th>
                        <th nzWidth="80px">歌手</th>
                        <th>专辑</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let item of basicTable.data; index as i">
                        <td class="first-col">
                            <span>{{i + 1}}</span>
                            <i class="ico play-song" title="播放"
                                [class.current]="currentIndex === i"
                                (click)="onAddSong(item, true)"></i>
                        </td>
                        <td class="song-name">
                            <a [routerLink]="['/songInfo', item.id]">{{item.name}}</a>
                        </td>
                        <td class="time-col">
                            <span>{{item.dt / 1000 | formatTime}}</span>
                            <p class="icons">
                                <i class="ico add" title="添加"
                                    (click)="onAddSong(item)"></i>
                                <i class="ico like" title="收藏"
                                    (click)="onLikeSong(item.id.toString())"></i>
                                <i class="ico share" title="分享"
                                    (click)="shareResource(item)"></i>
                            </p>
                        </td>
                        <td>
                            <ng-container *ngFor="let singer of item.ar; last as
                                isLast">
                                <a [routerLink]="['/singer', singer.id]">{{singer.name}}</a>
                                <em [hidden]="isLast">/</em>
                            </ng-container>
                        </td>
                        <td>{{item.al.name}}</td>
                    </tr>
                </tbody>
            </nz-table>
        </div>
    </div>
</div>